<!doctype html>
<html lang="en">

<head>
	<title>鑫洋泉运营管理平台</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- VENDOR CSS -->
	<link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../assets/vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/vendor/dataTables/jquery.dataTables.min.css">
	<link rel="stylesheet" href="../assets/vendor/linearicons/style.css">
	<!-- MAIN CSS -->
	<link rel="stylesheet" href="../assets/css/main.css">
	<!-- FOR DEMO PURPOSES ONLY. You should remove this in your project -->
	<link rel="stylesheet" href="../assets/css/demo.css">
	<!-- GOOGLE FONTS -->
	<!--<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">-->
	<!-- ICONS -->
	<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
	<link rel="icon" type="image/png" sizes="96x96" href="../assets/img/favicon.png">
</head>

<body>
	<!-- WRAPPER -->
	<div id="wrapper">
		<!-- NAVBAR -->
		<nav class="navbar navbar-default navbar-fixed-top">
			<h1 class="header_1">
				 鑫洋泉运营管理系统 
			</h1>
		</nav>


		<!-- END NAVBAR -->
		<!-- LEFT SIDEBAR -->
		<div id="sidebar-nav" class="sidebar">
			<div class="sidebar-scroll">
				<nav>
					<ul class="nav">
                        <li><a href="index.html" class="active"><i class="lnr lnr-home"></i> <span>首页</span></a></li>
                        <li><a href="device.html" class=""><i class="lnr lnr-chart-bars"></i> <span>车辆信息</span></a></li>
                        <li><a href="custom.html" class=""><i class="lnr lnr-chart-bars"></i> <span>客户信息</span></a></li>
                         
                        <li>
                            <a href="#"><i class="lnr lnr-chart-bars"></i> <span>SIM卡管理</span></a>
                            <ul class="nav">
                                <li><a href="cardsStatistics.html">统计信息</a></li>
                                <li><a href="cardsList.html">列表信息</a></li>
                            </ul>
                        </li>
                        <li>
							<a href="config.html"><i class="lnr lnr-chart-bars"></i> <span>配置管理</span></a>
							<ul class="nav">
								<li><a href="config.html" class=""><span>默认配置列表</span></a></li>
								<li><a href="parameters.html?1" class=""><span>解码类型</span></a></li>
								<li><a href="parameters.html?2" class=""><span>主机盒界面</span></a></li>
								<li><a href="parameters.html?3" class=""><span>前景和前后视角</span></a></li>
								<li><a href="parameters.html?4" class=""><span>转向视角</span></a></li>
								<li><a href="parameters.html?5" class=""><span>轨迹线类型</span></a></li>
						
							</ul>
						</li><!--<li><a href="device_detail.html" class=""><i class="lnr lnr-cog"></i> <span>设备详情</span></a></li>-->
                    </ul>
				</nav>
			</div>
		</div>
		<!-- END LEFT SIDEBAR -->
		<!-- MAIN -->
		<div class="main">
			<!-- MAIN CONTENT -->
			<div class="main-content">
				<div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12">
					        <h3 class="page-title ">卡统计</h3>
                        </div>
                        <!-- <div class="col-md-4"> -->
                            <!--<form class="navbar-form navbar-right">-->
                               <!--  <form>
                                <div class="input-group">
                                    <input type="text" value="" id="sim_id" class="form-control" placeholder="卡号">
                                    <span class="input-group-btn"><button type="button" onClick="search()" class="btn btn-primary">查询</button></span>
                                </div>
                            </form>
                        </div> -->
                    </div>
                    <hr>
                    <div class="row">
                        <!-- 日统计 -->
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-12">
                                    <div id="day-mobileflow" style="width: 600px;height: 400px;margin-top: 5px;"></div>
                                </div>
                            </div>
                        </div>
                        <!-- 月统计 -->
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-md-12">
                                    <div id="mon-mobileflow" style="width: 600px;height: 400px;margin-top: 5px;"></div>
                                </div>
                            </div>
                        </div>
                        <!-- <table id="example" class="col-md-12 display" cellspacing="0" width="100%">
                            
                           
                        </table> -->
					</div>
				</div>
			</div>
			<!-- END MAIN CONTENT -->
		</div>
		<!-- END MAIN -->
		<div class="clearfix"></div>
		<footer>
			<div class="container-fluid">
			</div>
		</footer>
	</div>
	<!-- END WRAPPER -->
	<!-- Javascript -->
    <script src="../assets/vendor/jquery/jquery.min.js"></script>
    <script src="../assets/vendor/echarts/echarts.js"></script>
    <script src="../assets/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="../assets/vendor/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <script src="../assets/vendor/jquery.easy-pie-chart/jquery.easypiechart.min.js"></script>
    <script src="../assets/scripts/klorofil-common.js"></script>
    <script src="../assets/vendor/china.js"></script>
    <script src="../assets/vendor/dataTables/jquery.dataTables.min.js"></script>
	<!-- <script src="../assets/vendor/jquery/jquery.min.js"></script>
    <script src="../assets/vendor/echarts/echarts.js"></script>
	<script src="../assets/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="../assets/vendor/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <script src="../assets/vendor/jquery.easy-pie-chart/jquery.easypiechart.min.js"></script>
    <script src="../assets/vendor/dataTables/jquery.dataTables.min.js"></script>
	<script src="../assets/scripts/klorofil-common.js"></script> -->
    <script>
    var basePath = '/oss-ws/ws/0.1/';
    </script>
    <script>
    //初始化柱状图

    var getIccid = document.URL.split('?')[1];
    var innitInfo = [
        {title:'日统计',url:basePath + 'simInfo/simDailyStat?'+getIccid,target:'day-mobileflow'},
        {title:'月统计',url:basePath + 'simInfo/simMonthyStat?'+getIccid,target:'mon-mobileflow'}
    ];
    for (var i = innitInfo.length - 1; i >= 0; i--) {
        getEchartsData(innitInfo[i]);
    }

    function getEchartsData(item){
         $.get(item.url, function (data){
            var infos = {
                title:item.title,
                target:item.target
            };
            innitPieEcharts(infos,data);
        });
    }
   
    function innitPieEcharts(infos,data){
        data.timeData.reverse();
        data.valueData.reverse();
        var myChart = echarts.init(document.getElementById(infos.target));
        var option = {
            title : {
                text: infos.title,
                subtext: '',
                x:'center'
             },
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : data.timeData,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'消耗流量',
                    type:'bar',
                    barWidth: '60%',
                    data:data.valueData,
                }
            ]
        };
        myChart.setOption(option);
    }

    //流量排名表
    $.get(basePath + 'simInfo/index/mongthRank', function (data){
        var myChart = document.getElementById('rank-mobileflow');
        data = data.data;
        for (var i = 0;i<data.length; i++) {
            var html = '<tr>';
            html += '<td>TOP '+(i+1)+'</td>';
            html += '<td>'+data[i].iccid+'</td>';
            html += '<td>'+data[i].value+'M</td></tr>';
            $('#rank-mobileflow').append(html);
        }
    });
    </script>
</body>

</html>
